<template>
<div>
    <Button type="primary" @click="dataModel = true">添加</Button>
    <Button type="error" @click="removeData">批量删除</Button>
    <Input v-model="keyWords" search enter-button placeholder="Enter something..." style="width:200px" @on-search="onSearch"/>
    <Table border :columns="columns" highlight-row ref="currentRowTable" :data="list"
     @on-select="handleSelectionChange" @on-select-cancel="handleSelectionChange" @on-select-all="handleSelectionChange" @on-select-all-cancel="handleSelectionChange"	></Table>
    <Page :total="total" show-elevator @on-change="onChangePage" />
     <Modal
        v-model="dataModel"
        title="数据处理"
        @on-ok="ok"
        @on-cancel="cancel"
        footer-hide>
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate.name" placeholder="Enter your name"/>
            </FormItem>
            <FormItem label="Age" prop="age">
                <Input v-model="formValidate.age" placeholder="Enter your age" />
            </FormItem>
            <FormItem label="BoardDate" prop="boardDate">
                <Input v-model="formValidate.boardDate" placeholder="Enter your boardDate" />
            </FormItem>
            <FormItem label="Brithday" prop="brithday">
                <Input v-model="formValidate.brithday" placeholder="Enter your brithday" />
            </FormItem>
            <FormItem label="Edu" prop="edu">
                <Input v-model="formValidate.edu" placeholder="Enter your edu" />
            </FormItem>
            <FormItem label="Email" prop="email">
                <Input v-model="formValidate.email" placeholder="Enter your email" />
            </FormItem>
            <FormItem label="Hobby" prop="hobby">
                <Input v-model="formValidate.hobby" placeholder="Enter your hobby" />
            </FormItem>
            <FormItem label="Sex" prop="sex">
                <Input v-model="formValidate.sex" placeholder="Enter your sex" />
            </FormItem>
            <FormItem label="Tel" prop="tel">
                <Input v-model="formValidate.tel" placeholder="Enter your tel" />
            </FormItem>
            <FormItem label="Work" prop="work">
                <Input v-model="formValidate.work" placeholder="Enter your work" />
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
            </FormItem>
        </Form>
    </Modal>
</div>
</template>
<script>
export default {
  data() {
    return {
      formValidate: {
        _id:'',
        name: "",
        age: 0,
        address: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        age: [
          {
            required: true,
            message: "Please select the age",
            trigger: "blur"
          }
        ],
      
       boardDate: [
          {
            required: true,
            type:'string',
            message: "The boardDate cannot be empty",
            trigger: "blur"
          }
        ],
        brithday: [
          {
            required: true,
            type:'string',
            message: "The brithday cannot be empty",
            trigger: "blur"
          }
        ],
        edu: [
          {
            required: true,
            message: "The edu cannot be empty",
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            type:'email',
            message: "The email cannot be empty",
            trigger: "blur"
          }
        ], 
        hobby: [
          {
            required: true,
            message: "The hobby cannot be empty",
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            message: "The sex cannot be empty",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "The tel cannot be empty",
            trigger: "blur"
          }
        ],
        work: [
          {
            required: true,
            message: "The work cannot be empty",
            trigger: "blur"
          }
        ],
        },
      columns: [
        {
            type: 'selection',
            width: 60,
            align: 'center',            
        },
        {
          title: "Name",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "BoardDate",
          key: "boardDate"
        },
        {
          title: "Brithday",
          key: "brithday"
        },
        {
          title: "Edu",
          key: "edu"
        },
        {
          title: "Email",
          key: "email"
        },
        {
          title: "Hobby",
          key: "hobby"
        },
        {
          title: "Sex",
          key: "sex"
        },
        {
          title: "Tel",
          key: "tel"
        },
        {
          title: "Work",
          key: "work"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row._id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      keyWords: "",
      dataModel: false,
      host:'http://10.31.156.62:3000/users',
      deletedId:[]
    };
  },
  methods: {
    show(index) {
       this.axios({
           url:`${this.host}/data/${index}`,
           method:'get'
       }).then(res=>{
           this.formValidate=res.data;
           this.dataModel=true;
       })
    },
    remove(index) {
    // 
      console.log(index)
       this.$Modal.confirm({
            title: '数据删除',
            content: '您确定删除吗',
            onOk: () => {
                this.axios({
                   url:`${this.host}/data/${index}`,
                   method:'delete'
               }).then(res=>{
                   this.$Message.success('Delete success');
                   this.getlist();
               })
            }
        });
    },
    getlist() {
      this.axios({
        url: `${this.host}/list`,
        method: "post",
        data:{
           page:this.page,
           limit:this.limit,
           name:this.keyWords
        }
      }).then(res => {
          console.log(res.data)
          res.data.rows.forEach(value=>{
            console.log(value.boardDate)
            value.boardDate=value.boardDate.moment()
            value.brithday=value.brithday.moment()
          })
          
          
        //  this.total = +res.headers["x-total-count"];
         this.total=res.data.total;
         this.list = res.data.rows;
      });
    },
    onChangePage(page) {
      this.page = page;
      this.getlist();
    },
    onSearch() {
      this.getlist();
    },
    ok() {
    },
    cancel() {
      this.formValidate={};
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
           if(this.formValidate._id){
                this.dataModel=false;
                this.axios({
                    url:`${this.host}/data/${this.formValidate._id}`,
                    method:'put',
                    data:this.formValidate
                }).then(res=>{
                    console.log(this.formValidate)
                    this.$Message.success("Edit Success!");
                    this.getlist();
                    this.formValidate={};
                })
           }else{
                this.dataModel=false;
                delete this.formValidate._id;
                
                this.axios({
                    url:`${this.host}/data`,
                    method:'post',
                    data:this.formValidate
                }).then(res=>{
                    console.log(this.formValidate)
                     console.log(res)
                    this.$Message.success("Add Success!");
                    this.getlist();
                    this.formValidate={}
                })
           }

        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSelectionChange(val){
      this.deletedId=val;
    },
    removeData(){
     
        var ids=[];
        if(this.deletedId.length<=0){
          this.$Message.error("至少删除一条");
        }else{
          
           this.$Modal.confirm({
            title: '数据删除',
            content: '确定删除吗?',
            onOk: () => {
              for(var i =0 ;i<this.deletedId.length;i++){
                ids.push(this.deletedId[i]._id)
              }
              console.log(ids);
              this.axios({
                url:`${this.host}/data/removes`,
                method:"post",
                data:{
                  ids:ids.toString()
                }
              }).then(res=>{
                this.$Message.success('删除成功!!');
                this.getlist();
              })
            }
        });
          
        }
        
    }
  },
  mounted() {
    this.getlist();
  }
};
</script>
